<template>
  <div>
    <gz-modal v-model="show" type="custom" :title="'筛选'" @changeShow="handleClose" @confirm="setQueryParams">
      <template slot="content">
        <div class="screen-list">
          <div class="screen-option">
            <div class="title">任务类型</div>
            <div class="screen-group">
              <div class="screen-item" :class="modalTypeValue.activeId == 0 ? 'active-item' : ''" @click="openNextModal({id: 0})">全部</div>
              <template v-if="treeData[0]">

                <div class="screen-item" v-if="treeData[0].children" v-for="(aTree,aIndex) in treeData[0].children" :key="aIndex" :class="modalTypeValue.activeId == aTree.id ? 'active-item' : ''"  @click="openNextModal(aTree)">{{aTree.countName}}</div>
                <div class="screen-item" style="opacity: 1;padding: 0;" v-if="treeData[0].children && (treeData[0].children.length + 1) % 3 == 2"></div>
              </template>
            </div>
          </div>
          <!-- <div class="screen-option">
            <div class="title">紧迫性</div>
            <div class="screen-group">
              <div class="screen-item">全部</div>
              <div class="screen-item">最高</div>
              <div class="screen-item">高</div>
              <div class="screen-item">中等</div>
              <div class="screen-item">低</div>
              <div class="screen-item">最低</div>
            </div>
          </div> -->
          <div class="screen-option" v-if="page == '/task/taskHandle'">
            <div class="title">任务状态</div>
            <div class="screen-group">
              <div class="screen-item" :class="modalStatusValue.activeId == statusList ? 'active-item' : ''" @click="modalStatusValue.activeId = statusList">全部</div>
              <div class="screen-item" v-if="statusList.length > 0" v-for="(status,sindex) in disposeStatusList(statusList)" :class="modalStatusValue.activeId == status ? 'active-item' : ''" @click="modalStatusValue.activeId = status">
                <span v-if="Number(status) == 0">待分配</span>
                <span v-if="Number(status) == 1">待受理</span>
                <span v-if="Number(status) == 2">进行中</span>
                <span v-if="Number(status) == 3">已完成</span>
                <span v-if="Number(status) == 4">已退回</span>
                <span v-if="Number(status) == 5">已拒绝</span>
              </div>
               <div class="screen-item" style="opacity: 1;padding: 0;" v-if="(statusList.length + 1) % 3 == 2"></div>
            </div>
          </div>
        </div>
      </template>
    </gz-modal>
    <gz-modal v-model="show1" type="custom" :title="modalTitle" @confirm="show1 = false">
      <template slot="content">
        <div class="screen-list">
          <div class="screen-option">
            <!-- <div class="title">普调任务</div> -->
            <div class="screen-group">
              <!-- <div class="screen-item" :class="modalValue1.type.children.id == modalValue1.type.id ? 'active-item' : ''" @click="setTypeId({id: modalValue1.type.id})">全部</div> -->
              <template v-if="treeData1.length > 0">
                <div class="screen-item" :class="modalTypeValue1.activeId == bTree.id ? 'active-item' : ''" v-for="(bTree,bIndex) in treeData1" :key="bIndex" @click="setTypeId(bTree)">{{bTree.countName}}</div>
                <div class="screen-item" style="opacity: 1;padding: 0;" v-if="treeData1.length % 3 == 2"></div>
              </template>
            </div>
          </div>
        </div>
      </template>
    </gz-modal>
  </div>
</template>

<script>
  import {
    gzModal
  } from '@/components/customize'
  export default {
    components: {
      gzModal
    },
    props: {
      screenModel: {
        type: Boolean,
        default: false
      },
      statusList: {
        type: String,
        default: ''
      },
      queryParams: {
        type: Object,
        default: () => {}
      }
    },
    model: {
      prop: 'screenModel',
      event: 'changeShow'
    },
    data() {
      return {
        show: this.screenModel,
        show1: false,
        show2: false,
        treeData: [],
        treeData1: [],
        modalTitle: '',
        modalTypeValue: {
          activeId: 0
        },
        modalTypeValue1: {
          activeId: 0
        },
        modalUrgencyValue: {
          activeId: 0
        },
        modalStatusValue: {
          activeId: this.statusList
        },
        searchData: {},
        page: ''
      }
    },
    created() {
      this.page = this.$route.path
    },
    mounted() {
      this.getTreeData()
    },
    watch: {
      screenModel(val) {
        this.show = val
      },
      statusList(val) {
        this.modalStatusValue.activeId = val
      }
    },
    methods: {
      handleClose(status) {
        this.$emit('changeShow',status)
      },

      disposeStatusList(statusList) {
        return statusList.split(',')
      },

      openNextModal(row) {
        this.modalTypeValue = row
        this.$set(this.modalTypeValue, 'activeId', row.id)
        if(row.id == 0) {
          this.searchData["def.type_id_$VEQ"] = ''
          this.searchData["def.key_$VEQ"] = ''
        }else {
          if(row.children) {
            let children = row.children
            let all = {
              id: row.id,
              countName: '全部'
            }
            if(children[0].id != row.id) {
              children.unshift(all)
            }
            if(!this.modalTypeValue1.activeId) {
              this.modalTypeValue1 = {...all,activeId: row.id}
            }
            this.treeData1 = children
            this.modalTitle = row.countName
            this.show1 = true
          }else {
            if (row.type == "tree") {
            	this.searchData["def.key_$VEQ"] = ''
            	this.searchData["def.type_id_$VEQ"] = row.id;
            } else if (row.type == "flow") {
            	this.searchData["def.type_id_$VEQ"] = ''
            	this.searchData["def.key_$VEQ"] = row.id;
            }
          }
        }
      },

      setTypeId(row) {
        this.modalTypeValue1 = row
        this.$set(this.modalTypeValue1, 'activeId', row.id)
        if(row.id == this.modalTypeValue.id) {
          if (this.modalTypeValue.type == "tree") {
          	this.searchData["def.key_$VEQ"] = ''
          	this.searchData["def.type_id_$VEQ"] = row.id;
          } else if (this.modalTypeValue.type == "flow") {
          	this.searchData["def.type_id_$VEQ"] = ''
          	this.searchData["def.key_$VEQ"] = row.id;
          }
        }else {
          if (row.type == "tree") {
          	this.searchData["def.key_$VEQ"] = ''
          	this.searchData["def.type_id_$VEQ"] = row.id;
          } else if (row.type == "flow") {
          	this.searchData["def.type_id_$VEQ"] = ''
          	this.searchData["def.key_$VEQ"] = row.id;
          }
        }
      },

      getTreeData() {
        this.baseService.postForm(this.__ctx + '/taskPool/getTaskPoolDefTypeTree', {
        	"statusList": this.statusList
        }).then(res => {
        	if (res.data.length > 0) {
        		this.treeData = res.data
        	}
        })
      },

      setQueryParams() {
        let searchParams = this.searchData
        searchParams.statusList = this.modalStatusValue.activeId
        this.$emit('search',searchParams)
        this.show = false
      }
    }
  }
</script>

<style lang="less" scoped>
  .screen-list {
    padding: 0 16px;
    box-sizing: border-box;
    .screen-option {
      .title {
        font-size: 16px;
        color: #1D2129;
        font-weight: 500;
        margin-bottom: 12px;
      }
      .screen-group {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        .screen-item {
          flex: 0 0 32%;
          text-align: center;
          font-size: 14px;
          color: #1D2129;
          font-weight: 400;
          padding: 9px 0;
          background-color: #F4F4F4;
          border-radius: 60px;
          margin-bottom: 16px;
        }
        .active-item {
          color: #FF4A32;
          box-sizing: border-box;
          border: 1px solid #FF4A32;
          background-color: #FEF7F7;
        }
      }
    }
  }
</style>
